<template>
    <!-- 签名横屏 -->
	<view class="signa">
        <view class="box">
            <canvas :style="{'width':cWidth,'height':cHeight}" canvas-id="mycanvas" @touchstart="onTouchstart" @touchmove="onTouchmove"></canvas>
            <view class="bottomBox">
                <view class="tip">请你在此手动签写自己的签章，签写操作完毕点击保存按钮</view>
                <view class="btn" style="margin-top: 18vw;" @click="onCancel()">取消</view>
                <view class="btn" style="margin-top: 8vw;" @click="onClear()">清除</view>
                <view class="btn blue" @click="onSave()">保存</view>
            </view>
        </view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            dom: null,
            lineList: [],
            cWidth: '0px',
            cHeight: '0px',
        }
    },
	onReady() {
		// 设置画板的尺寸
		let systemInfo = uni.getSystemInfoSync();
		this.cWidth = systemInfo.windowWidth - 56 + 'px';
		this.cHeight = systemInfo.windowHeight - 154 + 'px';
		// 创建canvas实例对象
		this.dom = uni.createCanvasContext('mycanvas', this);
		this.dom.setFillStyle('#E6E6E6');
		this.dom.fillRect(0, 0, 1000, 1000);
		this.dom.draw()
		
		uni.setNavigationBarTitle({ title: '高度'+this.cHeight });
	},
    methods: {
		/* 取消操作 */
        onCancel(){
            uni.navigateBack()
        },
		
		/* 清除操作 */
		onClear() {
		    this.dom.clearRect(0, 0, 1000, 1000);
			this.dom.setFillStyle('#E6E6E6');
			this.dom.fillRect(0, 0, 1000, 1000);
		    this.dom.draw()
		},
		
		/* 保存操作 */
		onSave() {
		    uni.canvasToTempFilePath({
		        canvasId: 'mycanvas',
		        fileType: 'jpg',
		        quality: 1, //图片质量
		        success: ({tempFilePath}) => {
					this.$http.file(tempFilePath).then(res => {
						uni.previewImage({ current: 0, urls: [res.data+'?x-oss-process=image/rotate,270'] });
					})
		        },
		        fail: (err) => {
		            console.log(err)
		        }
		    }, this)
		},
		
		/* 手指触屏事件 */
        onTouchstart(e) {
            this.lineList.push({
                points: [{
                    x: e.touches[0].x,
                    y: e.touches[0].y,
                }]
            })
            this.drawer(this.lineList[this.lineList.length - 1])
        },
		
		/* 手指移动事件 */
        onTouchmove(e) {
            this.lineList[this.lineList.length - 1].points.push({
                x: e.touches[0].x,
                y: e.touches[0].y,
            })
            this.drawer(this.lineList[this.lineList.length - 1])
        },
		
		/* 绘画操作 */
        drawer(item) {
            let x1, x2, x3, y1, y2, y3, cx, cy, t = 0.5;
            if (item.points.length > 2) {
                let line1 = item.points[item.points.length - 1];
                let line2 = item.points[item.points.length - 2];
                let line3 = item.points[item.points.length - 3];
                x1 = line1.x; y1 = line1.y;
                x2 = line2.x; y2 = line2.y;
                x3 = line3.x; y3 = line3.y;
                cx = (x2 - (Math.pow(1 - t, 2) * x3) - Math.pow(t, 2) * x1) / (2 * t * (1 - t))
                cy = (y2 - (Math.pow(1 - t, 2) * y3) - Math.pow(t, 2) * y1) / (2 * t * (1 - t))
                this.dom.setLineCap('round')
                this.dom.beginPath();
                this.dom.setStrokeStyle('black')
                this.dom.setLineWidth(5)
                this.dom.moveTo(x3, y3);
                this.dom.quadraticCurveTo(cx, cy, x1, y1);
                this.dom.stroke();
                this.dom.draw(true)
            }
        },
    }
}
</script>

<style scoped lang="scss">
.signa {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    height: 100vh;
    width: 100vw;
    padding: 20px 16px 30px;
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        padding: 12px 12px 100px;
        box-shadow: 0 6rpx 42rpx rgba(0, 0, 0, 0.05);
    }
    .bottomBox{
        flex-direction: column;
        justify-content: center;
        width: 100px;
        height: 80vw;
        padding: 10px;
        position: fixed;
        left: 50%;
        bottom: -40vw;
        transform: rotate(90deg);
        margin-left: -50px;
        margin-bottom: 72px;
        .tip{
            font-size: 11px;
            color: #FF6F77;
        }
        .btn{
            width: 100%;
            height: 37px;
            background: #F5F5F5;
            border-radius: 19px;
            margin-top: 7px;
            text-align: center;
            line-height: 37px;
            color: #333333;
            font-size: 13px;
            &.blue{
                background: #284CF4;
                color: #fff;
            }
        }
    }
}
</style>
